<template>
    <div class="home">
        <div class="left">
            <LeftMenu v-model="menuType"></LeftMenu>
        </div>
        <div class="right">
            <CreateLayer v-if="menuType === '1'"></CreateLayer>
            <CtrlMap v-else-if="menuType === '2'"></CtrlMap>
            <DrawMap v-else-if="menuType === '3'"></DrawMap>
        </div>
    </div>
</template>

<script>
import LeftMenu from '../components/LeftMenu.vue'
import CreateLayer from './map-case/CreateLayer.vue'
import CtrlMap from './map-case/CtrlMap.vue'
import DrawMap from './map-case/Draw.vue'
export default {
    components: {
        LeftMenu,
        CreateLayer,
        CtrlMap,
        DrawMap
    },
    data() {
        return {
            menuType: '3'
        }
    }
}
</script>

<style scoped lang="less">
@bd-bg: #55aaff;

.home {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .left {
        width: 200px;
        border-right: 1px solid @bd-bg;
    }

    .right {
        box-sizing: border-box;
        flex: 1 1 auto;
    }
}
</style>
